<template>
  <!--  -->
  <el-form :inline="true" :model="form">
    <el-form-item>区域：</el-form-item>
    <el-form-item label class="search-width">
      <el-select v-model="form.province" placeholder="省" size="small" @change="changeProvince">
        <el-option v-for="item in province" :key="item.key" :label="item.title" :value="item.key"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label class="search-width">
      <el-select v-model="form.city" placeholder="市" size="small" @change="changeCity">
        <el-option v-for="item in city" :key="item.key" :label="item.title" :value="item.key"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label class="search-width">
      <el-select v-model="form.county" placeholder="区" size="small">
        <el-option v-for="item in area" :key="item.key" :label="item.title" :value="item.key"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label>
      <el-input v-model="form.name" placeholder="请输入小区/房号/租客名" size="small"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch" size="small">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="onClear" size="small">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getLazyTree } from "@/api/base/region";
export default {
  name: "room-search",
  props: {
    searchHandle: {
      type: Function,
      default: () => {},
    },
    clearHandle: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        province: "",
        city: "",
        county: "",
        name: "",
      },
      province: [],
      city: [],
      area: [],
    };
  },
  created() {
    getLazyTree("00").then((res) => {
      this.province = res.data.data;
    });
  },
  methods: {
    changeProvince(value) {
      getLazyTree(value).then((res) => {
        this.city = res.data.data;
      });
    },
    changeCity(value) {
      getLazyTree(value).then((res) => {
        this.area = res.data.data;
      });
    },
    onSearch() {
      this.searchHandle(this.form);
    },
    onClear() {
      this.searchHandle();
    },
  },
};
</script>
<style>
.search-width {
  max-width: 120px;
}
</style>
